<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>12-上传图片验证</title>
	
<style type="text/css">

</style>
</head>
<body>
	
	<label for="file">上传图片类型:</label>
	<input type="file" name="input-file" id="file">
	


<script src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">

	function $(id){
		return typeof id === 'string' ? document.getElementById(id):null;
	}


window.onload=function(){

// 1.获取标签
	var file = document.getElementById('file')

//2.监听图片选择的变化
//  通过file标签绑定一个onchange函数，当选择了这任意一个文件之后就会执行函数	
	
	file.onchange = function(){

		//2-1:获取上传的图片路径,这里的文件的value值为路径
		var path = this.value
		console.log(path)

		//2-2:获取上传文件的路径， 在路径字符串中占的位置
		var loc = path.lastIndexOf('.')// .  在文件路径中处于第几位
		console.log(loc)

		//2-3：截取路径名称的后缀名
		var suffix = path.substr(loc)//截取 . 它本身和后面的全部str字符串
		console.log(suffix)

		//2-4：统一转小写
		var lower_suffix = suffix.toLowerCase()

		//2-5:判断文件的后缀名为什么格式，然后再提醒后缀名的正误
		//		判断路径名其实以为就是在判断字符串
		if( lower_suffix === '.jpg'){
			alert("文件为jpg格式")
		}else if(lower_suffix === '.jpeg'){
			alert("文件为jpeg格式")
		}else if(lower_suffix === '.png'){
			alert("文件为png格式")
		}else{
			alert("404")
		}
	}










}






</script>


</body>
</html>